// 流量统计管理样式
.traffic-stats-management {
  .overview-cards {
    .overview-card {
      transition: all 0.3s ease;
      cursor: pointer;
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
      
      .card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
        
        .card-icon {
          transition: all 0.3s ease;
          margin-bottom: 15px;
          
          &:hover {
            transform: scale(1.1);
          }
        }
        
        .card-info {
          .card-title {
            font-size: 14px;
            color: #606266;
            margin-bottom: 8px;
          }
          
          .card-value {
            font-size: 24px;
            font-weight: bold;
            color: #303133;
          }
        }
      }
    }
  }
  
  .filter-card {
    .filter-content {
      display: flex;
      align-items: center;
      gap: 15px;
      
      .date-range-picker {
        display: flex;
        align-items: center;
        
        .date-separator {
          margin: 0 10px;
          color: #606266;
          font-weight: 500;
        }
      }
      
      .el-date-editor {
        width: 180px;
      }
      
      .el-button {
        border-radius: 4px;
        transition: all 0.3s ease;
        
        &:hover {
          transform: translateY(-1px);
        }
      }
    }
  }
  
  .chart-card {
    height: 500px;
    display: flex;
    flex-direction: column;
    
    .chart-container {
      height: 420px;
      width: 100%;
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      
      // 确保图表容器有足够的空间
      > div {
        width: 100% !important;
        height: 100% !important;
      }
    }
    
    .chart-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      .chart-title {
        font-size: 16px;
        font-weight: 600;
        color: #303133;
      }
      
      .chart-controls {
        display: flex;
        align-items: center;
        
        .el-select {
          .el-input__inner {
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            transition: all 0.3s ease;
            
            &:hover {
              border-color: #409EFF;
            }
            
            &:focus {
              border-color: #409EFF;
              box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
            }
          }
        }
      }
      
      .chart-actions {
        .el-button--text {
          color: #409EFF;
          font-weight: 500;
          
          &:hover {
            color: #66b1ff;
          }
        }
      }
    }
  }
  
  .table-card {
    margin-top: 20px;
    
    .card-header {
      font-weight: 600;
      color: #303133;
      font-size: 16px;
      
      .el-button--text {
        color: #409EFF;
        font-weight: 500;
        
        &:hover {
          color: #66b1ff;
        }
      }
    }
    
    .el-table {
      border-radius: 8px;
      overflow: hidden;
      
      .el-table__header {
        th {
          background-color: #f8f9fa;
          color: #606266;
          font-weight: 600;
          font-size: 14px;
          border-bottom: 2px solid #e4e7ed;
        }
      }
      
      .el-table__body {
        tr {
          transition: all 0.3s ease;
          cursor: pointer;
          
          &:hover {
            background-color: #f5f7fa;
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
          }
          
          &.rank-first {
            background: linear-gradient(135deg, #fff7e6 0%, #fff2d9 100%);
            border-left: 4px solid #ffd700;
            
            &:hover {
              background: linear-gradient(135deg, #fff2d9 0%, #ffecb3 100%);
            }
          }
          
          &.rank-second {
            background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
            border-left: 4px solid #c0c0c0;
            
            &:hover {
              background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
            }
          }
          
          &.rank-third {
            background: linear-gradient(135deg, #f6ffed 0%, #f0f9e8 100%);
            border-left: 4px solid #cd7f32;
            
            &:hover {
              background: linear-gradient(135deg, #f0f9e8 0%, #e6f7d9 100%);
            }
          }
        }
      }
      
      // 修复表格滚动条闪动问题
      .el-table__body-wrapper {
        &::-webkit-scrollbar {
          width: 8px;
          height: 8px;
        }
        
        &::-webkit-scrollbar-track {
          background: #f1f1f1;
          border-radius: 4px;
        }
        
        &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
          border-radius: 4px;
          transition: background-color 0.2s ease;
          
          &:hover {
            background: #a8a8a8;
          }
        }
        
        &::-webkit-scrollbar-corner {
          background: #f1f1f1;
        }
      }
    }
  }
  
  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    padding: 20px 0;
    
    .el-pagination {
      .el-pagination__total {
        color: #606266;
        font-weight: 500;
        margin-right: 20px;
      }
      
      .el-pager li {
        transition: all 0.3s ease;
        border-radius: 6px;
        margin: 0 2px;
        
        &:hover {
          color: #409EFF;
          background-color: #f0f9ff;
        }
        
        &.active {
          background-color: #409EFF;
          color: white;
          box-shadow: 0 2px 8px rgba(64, 158, 255, 0.3);
        }
      }
      
      .btn-prev, .btn-next {
        border-radius: 6px;
        transition: all 0.3s ease;
        
        &:hover {
          background-color: #f0f9ff;
          color: #409EFF;
        }
      }
      
      .el-pagination__sizes {
        .el-select {
          .el-input__inner {
            border-radius: 6px;
            border: 1px solid #dcdfe6;
            transition: all 0.3s ease;
            
            &:hover {
              border-color: #409EFF;
            }
          }
        }
      }
    }
  }
  
  // 统计卡片样式
  .stats-card {
    .card-icon {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
      
      i {
        font-size: 32px;
        color: white !important;
        display: inline-block;
        font-family: 'element-icons' !important;
        font-style: normal;
        font-weight: normal;
        line-height: 1;
        vertical-align: baseline;
      }
      
      &.total-users {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      }
      
      &.active-users {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      }
      
      &.new-users {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      }
      
      &.total-views {
        background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
      }
      
      &.total-likes {
        background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      }
      
      &.total-comments {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
      }
      
      &.total-articles {
        background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
      }
      
      &.total-topics {
        background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
      }
      
      &.total-columns {
        background: linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%);
      }
      
      &.total-counselors {
        background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
      }
      
      &.total-appointments {
        background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%);
      }
      
      &.total-assessments {
        background: linear-gradient(135deg, #ff9a8b 0%, #a8e6cf 100%);
      }
    }
    
    .card-info {
      flex: 1;
      
      .card-title {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
      }
      
      .card-value {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
        letter-spacing: 0.5px;
      }
    }
  }
  
  // 图表容器样式
  .chart-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    
    .chart-loading {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 10;
    }
  }
  
  // 响应式设计
  @media (max-width: 768px) {
    padding: 10px;
    
    .overview-cards {
      .el-col {
        margin-bottom: 10px;
      }
    }
    
    .filter-content {
      flex-direction: column;
      align-items: stretch !important;
      
      .el-date-editor {
        width: 100% !important;
        margin-bottom: 10px;
      }
      
      .el-button {
        margin-bottom: 5px;
      }
    }
    
    .chart-container {
      height: 420px !important;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      
      // 饼图特殊样式
      .content-type-chart {
        width: 360px;
        height: 360px;
        margin: 0 auto;
      }
    }
  }
  
  // 加载状态样式
  .el-loading-mask {
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  // 表格空状态
  .el-table__empty-block {
    .el-table__empty-text {
      color: #909399;
      font-size: 14px;
    }
  }
  
  // 标签样式
  .el-tag {
    border-radius: 12px;
    font-weight: 500;
    
    &.el-tag--primary {
      background-color: #ecf5ff;
      border-color: #b3d8ff;
      color: #409eff;
    }
    
    &.el-tag--success {
      background-color: #f0f9ff;
      border-color: #b3e19d;
      color: #67c23a;
    }
    
    &.el-tag--warning {
      background-color: #fdf6ec;
      border-color: #f5dab1;
      color: #e6a23c;
    }
    
    &.el-tag--info {
      background-color: #f4f4f5;
      border-color: #d3d4d6;
      color: #909399;
    }
  }
  
  // 图标动画
  .el-icon-refresh {
    transition: transform 0.3s ease;
    
    &:hover {
      transform: rotate(180deg);
    }
  }
  
  .el-icon-download {
    transition: transform 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
    }
  }
  
  // 数据表格特殊样式
  .data-table {
    // 排名样式
    .rank-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      
      .rank-badge {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 14px;
        color: white;
        
        &.rank-1 {
          background: linear-gradient(135deg, #ffd700, #ffed4e);
          box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
        }
        
        &.rank-2 {
          background: linear-gradient(135deg, #c0c0c0, #e0e0e0);
          box-shadow: 0 2px 8px rgba(192, 192, 192, 0.3);
        }
        
        &.rank-3 {
          background: linear-gradient(135deg, #cd7f32, #daa520);
          box-shadow: 0 2px 8px rgba(205, 127, 50, 0.3);
        }
      }
      
      .rank-number {
        font-weight: 600;
        color: #606266;
        font-size: 16px;
      }
    }
    
    // 标题单元格样式
    .title-cell {
      .title-text {
        font-weight: 500;
        color: #303133;
        line-height: 1.4;
        margin-bottom: 4px;
      }
      
      .content-id {
        font-size: 12px;
        color: #909399;
        font-family: 'Courier New', monospace;
      }
    }
    
    // 统计单元格样式
    .stat-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      
      .stat-icon {
        color: #409EFF;
        font-size: 16px;
      }
      
      .stat-value {
        font-weight: 600;
        color: #303133;
        font-size: 14px;
      }
    }
    
    .el-table__row {
      &:nth-child(1) {
        background-color: #fff7e6;
        
        .el-table__cell {
          font-weight: bold;
        }
      }
      
      &:nth-child(2) {
        background-color: #f0f9ff;
      }
      
      &:nth-child(3) {
        background-color: #f6ffed;
      }
    }
  }
  
  // 趋势指示器
  .trend-indicator {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    margin-left: 8px;
    
    &.trend-up {
      color: #67c23a;
    }
    
    &.trend-down {
      color: #f56c6c;
    }
    
    &.trend-stable {
      color: #909399;
    }
    
    i {
      margin-right: 2px;
    }
  }
  
  // 数据概览网格
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
  }
  
  // 图表网格布局
  .charts-grid {
    margin-bottom: 20px;
    
    .el-row {
      margin-bottom: 20px;
      
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    .el-col {
      height: 500px;
      
      // 响应式布局
      @media (max-width: 1200px) {
        height: 450px;
      }
      
      @media (max-width: 768px) {
        height: 400px;
        margin-bottom: 15px;
      }
    }
  }
  
  // 响应式优化
  @media (max-width: 1200px) {
    .chart-card {
      height: 450px;
      
      .chart-container {
        height: 380px;
      }
    }
  }
  
  @media (max-width: 768px) {
    .chart-card {
      height: 400px;
      
      .chart-container {
        height: 320px;
        
        .content-type-chart {
          width: 280px;
          height: 280px;
        }
      }
    }
  }
}
